<template>
	<view class="content">
		<view class="card">
			<view class="card_image">
				<image :src="orderData.img"></image>
				<view style="display: flex;flex-direction: column;gap: 10rpx;">
					<p style="display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;text-overflow: ellipsis;overflow: hidden;">{{ orderData.description}}</p>
				</view>				
			</view>
			<view class="card_price">
				<p style="font-weight: bold;">成交价</p>
				<p style="font-weight: bold;">￥{{ orderData.totalPrice }}</p>
			</view>
			<u-divider lineColor="#b4b4b4"></u-divider>
			<view class="card_orderNo">
				<view class="card_orderNo between">
					<p>订单编号</p>
					<p>{{ orderData.orderNo }}</p>
				</view>
				<view class="card_orderNo between">
					<p>卖家昵称</p>
					<p>{{ orderData.name}}</p>
				</view>
				<view class="card_orderNo between">
					<p>买家手机号</p>
					<p>{{ orderData.phone}}</p>
				</view>
				<view class="card_orderNo between">
					<p>创建时间</p>
					<p>{{ orderData.createTime }}</p>
				</view>
				<view class="card_orderNo between">
					<p>状态</p>
					<p
					  :style="{
						color: orderData.status == 0 ? '#eab906' : 
									 orderData.status == 1 ? 'skyblue' : 
									 orderData.status == 2 ? 'red' : 'green'
					  }"
					>
					  {{ orderData.status == 0 ? '待付款' : orderData.status == 1 ? '待出行' : orderData.status == 2 ? '已取消' : '已完成' }}
					</p>
				</view>
			</view>
		</view>
		<!-- 按钮事件 -->
		<view class="button">
			<!-- 待付款 -->
			<view class="button_type" v-if="orderData.status == 0">
				<u-button type="primary" text="立即付款" @click="handlePay"></u-button>
			</view>
			<!-- 待出行 -->
			<view class="button_type" v-if="orderData.status == 1">
				<u-button type="success" text="出示二维码" @click="handCodeTo"></u-button>
			</view>
			<!-- 已取消 or 已出行 -->
			<view class="button_type" v-if="orderData.status == 2  || orderData.status == 3">
				<u-button text="返回首页" @click="handToOne"></u-button>
			</view>
		</view>
	</view>
	
</template>

<script setup>
import { getOrderInfoById } from '@/api/order.js'
import { ref } from 'vue';
import { onShow, onLoad } from "@dcloudio/uni-app"
import { gerChangeToPay } from '@/api/enroll.js';
import { useGlobalStore } from '@/stores/global.js'


const store = useGlobalStore()
const orderData = ref({})
const id = ref(0)

async function getOrderData () {
	let data = await getOrderInfoById(id.value)
	orderData.value = data.data;
}

// 支付接口
function handlePay() {
	gerChangeToPay(orderData.value.id)
	uni.showToast({ title: '支付成功', icon: 'none' })
	uni.switchTab({
		url:'/pages/trip/trip'
	})
}

// 跳转接口
function handCodeTo() {
	uni.showToast({
		title: '跳转二维码页面',
		icon : 'none'
	})
	store.setOrderId(orderData.value.id)
	// 跳转到二维码页面
	uni.navigateTo({
		url: `/pages/trip/code/index`
	})
}

// 返回
function handToOne() {
	uni.navigateBack()
}

onShow(() => {
	getOrderData(id.value);
})
onLoad((options) => {
	id.value = options.id;
	getOrderData(options.id)
})
// console.log(store.orderId);

</script>

<style setup>
.content{
	width: 100vw;
	height: 100vh;
	background-color: #f1f1f1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.card{
	width: 95vw;
	background-color: white;
	border-radius: 20rpx;
	padding: 30rpx;
}

.card_image {
	display: flex;
	gap: 30rpx;
}
.card_image image {
	width: 280rpx;
	height: 280rpx;
	background-size: cover;
	flex-shrink: 0;
}
.card_price {
	margin-top: 20rpx;
	display: flex;
	justify-content: space-between;
}

.card_orderNo {
	margin-top: 20rpx;
}

.between{
	display: flex;
	justify-content: space-between;
}

.button{
	position: fixed;
	bottom: 100rpx;
}
.button_type{
	width: 90vw;
}
</style>